<template>
  <el-dialog
    v-model="dialogVisible"
    title="时间段排班"
    :width="1000"
    :before-close="handleClose"
  >
    <div class="">
      <div class="second-title">基本信息</div>
      <div class="flex a-c">
        <div class="mt16 mb16 mr12">
          <span>号别：</span>
          <el-input
            v-model="number"
            size="small"
            disabled
            style="width: 40px"
          ></el-input>
        </div>
        <div class="mt16 mb16 mr12">
          <el-checkbox
            v-model="number"
            size="small"
            label="序号控制"
          ></el-checkbox>
        </div>
        <div class="mt16 mb16 mr12">
          <span>号类：</span>
          <el-input
            v-model="number"
            size="small"
            disabled
            style="width: 40px"
          ></el-input>
        </div>
        <div class="mt16 mb16 mr12">
          <span>限约：</span>
          <el-input-number v-model="num" size="small" :min="1" />
          <span class="text">每次根据实际情况填</span>
        </div>
        <div class="mt16 mb16 mr12">
          <el-checkbox
            v-model="number"
            size="small"
            label="挂号时必须建病案"
          ></el-checkbox>
        </div>
        <div class="mt16 mb16 flex a-c right">
          <span>一个时间段安排人数：</span>
          <el-input-number v-model="num" size="small" :min="1" />
        </div>
      </div>
      <div class="flex a-c">
        <s-select
          class="mr12"
          :label="'门诊号规则'"
          :options="[]"
          width="120px"
          v-model="selcte"
          placeholder="请选择"
        ></s-select>
        <s-select
          class="mr12"
          :label="'项目'"
          :options="[]"
          width="170px"
          v-model="selcte"
          placeholder="请选择"
        ></s-select>
        <s-select
          :label="'医生'"
          :options="[]"
          v-model="selcte"
          width="120px"
          placeholder="请选择"
        ></s-select>
        <el-button class="delet-button" type="danger" size="small" plain
          >删除时段安排</el-button
        >
      </div>
    </div>
    <div>
      <div class="second-title mt12">时段设置</div>

      <div>
        <div class="mt16 mb16 flex a-c j-s-b">
          <div>
            <span>时间间隔(分)：</span>
            <el-input-number
              width=""
              v-model="step"
              :min="1"
              style="width: 165px"
            />
            <div class="flex a-c mt16">
              <div>
                <div class="flex a-c">
                  <el-checkbox
                    class="text-color mr12"
                    v-model="custom"
                    size="small"
                    label="自定义"
                  ></el-checkbox>
                  <el-time-picker
                    style="width: 170px"
                    v-model="value1"
                    size="small"
                    is-range
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="check">
            <sChecked ref="checkCom" :custom="custom" />
          </div>

          <div class="button-warp">
            <el-button
              type="primary"
              size="small"
              @click="handler"
              class="mb16"
              plain
              >计算</el-button
            >
            <el-button class="mb16" type="danger" plain>删除</el-button>
          </div>
        </div>
      </div>
      <div>
        <div class="second-title">按日期排班</div>
        <div class="flex a-c">
          <el-date-picker
            class="mt16 mb16"
            v-model="datePicker"
            type="date"
            @change="getPickerchange"
            placeholder="选择日期"
          />
          <span class="ml12">
            {{ datePickerText }}
          </span>
        </div>
      </div>

      <div class="flex j-s-b">
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          style="width: 100%"
          empty="暂无查不到记录"
        >
          <el-table-column type="selection" width="45" />
          <el-table-column
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :label="item.lable"
            :width="item.width"
            align="center"
          />
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { defineExpose } from "vue";
import { getDate } from "@common/src/utils/days.ts";
import sChecked from "./checked.vue";
import { useTable, useDate } from "../scheduling";
import { useDialog } from "@common/src/hooks/dialog.ts";
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    params: Object;
  }>(),
  {
    modelValue: false,
    params: () => {},
  }
);
const emit = defineEmits(["update:modelValue"]);
const { handleClose, dialogVisible } = useDialog(props, emit);
interface User {
  time1: string;
  num1: string;
  time2: string;
  num2: string;
  time3: string;
  num3: string;
  time4: string;
  num4: string;
}
const number: number = ref(2837);
const value = ref(new Date());
const value1 = reactive<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
]);
const selcte = ref("");
const checkCom = ref();
const { datePickerText, getPickerchange, datePicker } = useDate();
const { tableColumn, tableData, handler, step, loading, custom } =
  useTable(checkCom);
</script>

<style lang="scss" scoped>
.mr12 {
  margin-right: 12px;
}
.button-warp {
  height: 100%;
  margin-top: auto;
  margin-bottom: -16px;
}
.right {
  margin-left: auto;
}
.text {
  font-size: 12px;
  margin-left: 8px;
}
.text-color {
  color: red;
}
.delet-button {
  margin-left: auto;
}
.day-radio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 12px;
}
</style>
